<template>
  <div>
    <div class="chaxun">
      <p>
        <span>查询</span>
      </p>
      <div>
        <span>搜索：<input type="text" placeholder="可以根据菜品类别进行搜索"> </span>
      </div>
    </div>
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column label="序号" width="120">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column prop="name" label="规格名称

" width="120">
      </el-table-column>
      <el-table-column prop="address" label="备注" show-overflow-tooltip>
      </el-table-column>

      <el-table-column prop="zhuangtai" label="状态" show-overflow-tooltip>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
          <el-button type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <div style="margin-top: 20px">
      <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
      <el-button @click="toggleSelection()">取消选择</el-button>
    </div> -->
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]"
        :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="100">
      </el-pagination>
    </div>
  </div>
</template>
  
<script>
// import { huang } from '@/apis/huanglanglang/huanglanglang.js'
export default {
  methods: {
    // fun() {
    //   huang().then((ok) => {
    //     console.log(ok);
    //   })
    // },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  },

  data() {
    return {
      tableData: [{
        date: '001',
        name: '大份',
        address: '',
        zhuangtai: '正常'
      }, {
        date: '002',
        name: '中份',
        address: '',
        zhuangtai: '正常'
      }, {
        date: '003',
        name: '小份',
        address: '',
        zhuangtai: '正常'
      }, {
        date: '004',
        name: '大份',
        address: '',
        zhuangtai: '正常'
      }, {
        date: '005',
        name: '中份',
        address: '',
        zhuangtai: '正常'
      }, {
        date: '006',
        name: '小份',
        address: '',
        zhuangtai: '正常'
      }, {
        date: '007',
        name: '大份',
        address: '',
        zhuangtai: '正常'
      }],
      multipleSelection: []
    }
  }
}

</script>
  
<style scoped>
.chaxun {
  height: 120px;
  width: 100%;
  border: 1px solid #DCDCDC;
  margin-bottom: 7px;
}

.chaxun p {
  height: 55px;
  width: 100%;
  background: #DCDCDC;
  line-height: 55px;
  display: block;
}

.chaxun p span {
  margin-left: 14px;
}

.chaxun b span {
  margin-left: 18px;
}

.chaxun b {
  font-weight: 400;
  width: 100%;
  height: 65px;
  line-height: 65px;
}

.chaxun b span input {
  width: 200px;
  height: 27px;
}

/* .el-table__body-wrapper {
    text-align: center;
  } */
.el-table__header-wrapper {
  text-align: center;
}

.block {
  float: right;
  margin-right: 50px;
}
</style>